<template>
   <div class="observerLibrary-increase">
        <!-- 新增弹窗 -->
        <a-modal
         :visible="visibleShow" 
         :title="addEditParameter.id?'编辑':'新增'" 
         @ok="handleOk" 
         :confirmLoading="confirmLoading"
         @cancel="visibleShow = false">
            <a-spin size="large" :spinning="spinning">
                <a-form v-if="visibleShow" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                     <a-form-item label="上级分类">
                           <a-input
                           :disabled = "true"
                           placeholder=""
                           v-decorator="[
                              'fsjfl', { initialValue:formState.fsjfl, rules: rules.fsjfl}
                           ]"/>
                     </a-form-item>
                     <a-form-item label="分类名称">
                           <a-input
                           placeholder="请输入分类名称"
                           v-decorator="[
                              'flxmc', { initialValue:formState.flxmc, rules: rules.flxmc}
                           ]"/>
                     </a-form-item>
                     <a-form-item label="序号">
                           <a-input-number
                           placeholder=""
                           v-decorator="[
                              'forder', { initialValue:formState.forder, rules: rules.forder}
                           ]"/>
                     </a-form-item>
                </a-form>
            </a-spin>
        </a-modal>
    </div>
</template>

<script>
import {addType, editType} from './service/index'
export default {
   components: {
      
   },
   props: {
      addEditParameter:{
         type:Object,
         default:[]
      }
   },
   data (){
      return {
         spinning: false,
         visibleShow: false,
         confirmLoading: false,
         submittedSuccessfully: false,
         form: this.$form.createForm(this, { name: 'coordinated' }),
         formState: {},
         rules:{
                flxmc: [{
                    required: true,
                    message: '请输入分类名称',
                    trigger: 'blur',
                }],
                fsjfl: [{
                    required: false,
                    message: '请输入上级分类',
                    trigger: 'blur',
                }],
         },
      }
   },
   methods: {
      // 
      cancelLoading(){
         // let timer = setInterval((val)=>{
         //       this.spinning = false
         //       clearInterval(timer);
         // },500);
         this.spinning;
      },

      // 
      handleOk(){
         this.handleSubmit()
      },
      
      // 
      handleSubmit(e) {
            var formState = {}
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.confirmLoading = true
                    formState = {
                        ...this.formState,
                        ...values
                    }
                    if (formState.id) {
                        editType(formState).then(res=>{
                           if(res.code == 200){
                              this.submittedSuccessfully = true
                              this.$message.success(res.message)
                              this.confirmLoading = false
                              this.visibleShow = false
                              this.$emit('handleOk',true,this.formState.id)
                           }else{
                              this.$message.warning(res.message)
                              this.confirmLoading = false
                           }
                        })
                    } else {
                        addType(formState).then(res=>{
                           if(res.code == 200){
                              this.$message.success(res.message)
                              
                              this.submittedSuccessfully = true
                              this.confirmLoading = false
                              this.visibleShow = false
                              this.$emit('handleOk',true,'')
                           }else{
                              this.$message.warning(res.message)
                              this.confirmLoading = false
                           }
                        })
                    }
                    
                }
            });
            
      },
   },
   computed: {},
   created() {},
   update() {
      this.cancelLoading();
   },
   mounted() {
      if(this.addEditParameter.id){
         this.formState.id = this.addEditParameter.id
      }
   },
   watch: {
      addEditParameter(newval,oldVal){
            this.spinning = true
            this.formState = {
                flxmc: newval.flxmc ? newval.flxmc : '',
                fparentid: newval.fparentid ? newval.fparentid : '',
                forder: newval.forder ? newval.forder: 0,
                fsjfl: newval.fsjfl ? newval.fsjfl : '', 
            }
            if(newval.id){
                this.formState.id = newval.id
            }
            this.spinning = false
      }
   }
}
</script>

<style lang="less">
.ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 .acceptance-modal .ant-modal-header{
    display: none !important;
 }
 .acceptance-modal .ant-modal-footer{
    display: none !important;
 }
 .acceptance-modal .ant-modal-content{
    height: 100vh;
    overflow: auto;
 }
 .full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>